<template>
  <div>
    <swiper :options="swiperOptions">
      <swiper-slide class="ai-center p-1 mb-4" v-for="(item,i) in model.skins" :key="i">
        <img class="w-100" :src="item.url" alt />
        <div class="text-center pt-1 fs-lg">{{item.name}}</div>
      </swiper-slide>
      <div class="pagination-hero swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  props: {
    id: { type: String }
  },
  data() {
    return {
      swiperOptions: {
        pagination: {
          el: ".swiper-pagination"
        }
      },
      model: {}
    };
  },
  created() {
    this.feach();
  },
  methods: {
    async feach() {
      const res = await this.$http.get(`/heroes/${this.id}`);

      this.model = res.data; //.skins
    }
  }
};
</script>

<style lang="scss">
.pagination-hero{
  position: none !important;
  padding-top: 5px;
  .swiper-pagination-bullet-active{
    background: #000 !important;
  }
}
</style>